import Taro, { Component, Config } from '@tarojs/taro'
import { AtTimeline, AtIcon } from 'taro-ui'
import { View, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import '@tarojs/async-await'
import './logistics.scss'
import ExpressStore from '../../../stores/expressStore';
import Stores from '../../../stores/storeIdentifier';
import { ExpressDto } from '../../../services/express/dto/expressDto';

export interface ILogisticsProps {
  expressStore: ExpressStore
}
@inject(Stores.ExpressStore)
@observer
class Logistics extends Component<ILogisticsProps> {

  state = {
    expressNo: '',
    code: '',
    list: [],
    result: { State: '0' }
  }
  express: ExpressDto
  constructor(props) {
    super(props)
    this.setState({
      code: this.$router.params.code,
      expressNo: this.$router.params.express
    })
  }

  config: Config = {
    navigationBarTitleText: '物流信息'
  }

  async componentWillMount() {
    await this.getExpress()
    await this.getExpressByCode()
  }


  async getExpress() {
    await this.props.expressStore.getOrderTracesByJson(this.$router.params.code, this.$router.params.express)
    let str = this.props.expressStore.addressList
    let result = JSON.parse(str)
    let list: any[] = []
    if (result.Success) {
      result.Traces.map((item) => {
        list.push({ title: item.AcceptStation, content: [item.AcceptTime], icon: 'clock' })
      })
      //list = _.orderBy(list, ['content'], ['desc'])
      if (result.State == 3) {
        list[0].icon = 'check-circle'
      }
    }

    this.setState({
      list: list,
      result: result
    })
  }

  async getExpressByCode(){
    await this.props.expressStore.getExpressByCode(this.$router.params.code)
    this.express = this.props.expressStore.express
    this.setState({})
  }

  render() {
    return (
      <View className='logistics-wrap'>
        <View className='pj-panel'>
          <View className='pj-panel-header ratina-bd bd-b'>
            <View className='strong'>
              <AtIcon prefixClass='icon' value='wuliu' size='14' color='#333' />
              <Text>{this.express.name}</Text>
            </View>
            <Text className='ft'>快递单号：{this.state.expressNo}</Text>
          </View>
          <View className='pj-panel-body'>
            {this.state.result.State != '0' ?
              <AtTimeline
                pending
                items={this.state.list}
              >
              </AtTimeline> :
              <View>
                暂无物流信息
            </View>}
          </View>
        </View>

      </View>
    )
  }
}

export default Logistics
